<template>
  <SelectTrigger label="klm与klz" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示kmz\kml 文件的加载
 * kml:.kml（Keyhole Markup Language）是一种基于 XML 的文件格式，主要用于表示地理数据。
 *      它被广泛应用于地图应用程序，如 Google Earth 和 Google Maps，用于标记位置、绘制路径、展示地形模型等。
 * kmz: .kmz 是 .kml 文件的压缩版本，使用 ZIP 格式进行压缩。它不仅能包含 .kml 文件，
 *      还能打包相关的资源文件（如图片、图标、3D 模型等），用于在地理应用程序中更方便地传输和展示地理数据。
 * czml: CZML (Cesium Language) 是一种基于 JSON 的文件格式，专门用于描述动态地理空间场景。
 *       CZML 文件通过定义时间变化的几何体、属性和相机位置等内容，使 Cesium 这样的 3D 地球和地图应用能够显示动态的数据。
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]);
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  options.value = [
    {
      text: "加载kml",
      onselect: async function () {
        viewer.dataSources.removeAll();
        const dataSource = Cesium.KmlDataSource.load(
          "/cesiumData/mockData/kml/facilities/facilities.kml",
          {
            camera: viewer.scene.camera,
            canvas: viewer.scene.canvas,
          }
        );
        viewer.dataSources.add(dataSource);
      },
    },
    {
      text: "加载kmz",
      onselect: async function () {
        viewer.dataSources.removeAll();
        const dataSource = Cesium.KmlDataSource.load(
          "/cesiumData/mockData/kml/gdpPerCapita2008.kmz",
          {
            camera: viewer.scene.camera,
            canvas: viewer.scene.canvas,
          }
        );
        viewer.dataSources.add(dataSource);
      },
    },
    {
      text: "加载kml-路线",
      onselect: async function () {
        viewer.dataSources.removeAll();
        var dataSource = Cesium.KmlDataSource.load(
          "/cesiumData/mockData/kml/bikeRide.kml",
          {
            camera: viewer.scene.camera,
            canvas: viewer.scene.canvas,
          }
        );
        viewer.dataSources.add(dataSource).then(function (dataSource) {
          viewer.clock.shouldAnimate = false;
          var rider = dataSource.entities.getById("tour");
          viewer.flyTo(rider).then(function () {
            viewer.trackedEntity = rider;
            viewer.selectedEntity = viewer.trackedEntity;
            viewer.clock.multiplier = 30;
            viewer.clock.shouldAnimate = true;
          });
        });
      },
    },
    {
      text: "加载czml",
      onselect: async function () {
        viewer.dataSources.removeAll();
        const dataSource = Cesium.CzmlDataSource.load(
          "/cesiumData/mockData/czml/Vehicle.czml"
        );
        viewer.dataSources.add(dataSource).then(function (dataSource) {
          viewer.clock.shouldAnimate = true; // 开启动画
        });
        viewer.scene.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
          orientation: {
            heading: 6,
          },
        });
      },
    },
  ];
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
